
<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            @changePage="handleChangePage"
            :list="list"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <Button @click="exportExcel" style="width:92px;height:30px;text-align:center;margin-right:10px" :loading="exportLoading">导出Execl</Button>
                        <!-- <Button @click="handlePrint" style="width:92px;height:30px;text-align:center;" :loading="exportLoading">打印表格</Button> -->
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div></div>
                        <Select v-model="search.type" style="width:80px;margin-right:10px">
                            <Option :value="0">全部</Option>
                            <Option :value="2">药品</Option>
                            <Option :value="3">耗材</Option>
                        </Select>
                        <Select v-model="search.shopid" style="width:180px;margin-right:10px" placeholder="请选择门店">
                            <Option v-for="item in shopList" :value="item.ID" :key="item.ID" @click.native="handleshopList(item)">{{ item.ShopName }}</Option>
                        </Select>
                        <!-- <DatePicker type="date" placeholder="请选择开始时间" style="width:150px;margin-left:10px;" v-model="search.start"></DatePicker>
                        <DatePicker type="date" placeholder="请选择结束时间" style="width:150px;margin:0 10px;" v-model="search.end"></DatePicker>-->
                        <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入药品名称" style="width:200px" />
                        <i-input style="display:none"></i-input>
                        <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                    </div>
                </div>
            </Form>
        </global-tables>
        <!-- <Drugs ref="Drugs" :dataArr="dataArr" v-if="isPrint" /> -->
    </div>
</template>

<script>
/**
 *  门店销售统计
 */
import { ExeclData, shopData, getTablesList } from './service'
import GlobalTables from '@/components/GlobalTables'
import excel from '@/components/Excel'
//import Drugs from '@/components/Print/Drugs.vue'
export default {
    name: 'financeInboundproDetail',
    components: {
        GlobalTables,
        //Drugs
    },
    data() {
        return {
            dataArr: {},
            isPrint: false,
            Name: '',
            shopList: [],
            list: [],
            data4: [],
            total: 0,
            itemId: 0,
            exportLoading: false,
            productsList: [],
            loading: true,
            type: '',
            defaultAutoComplete: '',
            PSIDlist: [],
            autoComplete: [],
            isModal: false,
            allSelectArr: null,
            isSpecifications: false,
            Specifications: '',
            ModalTitle: '新建采购单明细',
            search: {
                type: '',
                pageindex: 1,
                pagesize: 10,
                shopid: 0,
                keyword: ''
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '商品名称',
                    key: 'ProName'
                    // align: 'center'
                },
                {
                    title: '通用名',
                    key: 'ShortName',
                    width: 150,
                    align: 'center'
                },
                {
                    title: '规格',
                    key: 'Spec',
                    width: 150,
                    align: 'center'
                },
                {
                    title: '生产厂家',
                    key: 'FactoryShortName',
                    // width: 200,
                    align: 'center'
                },
                {
                    title: '国药准字',
                    key: 'StdDocID',
                    width: 180,
                    align: 'center'
                },
                {
                    title: '药品分类',
                    key: 'ThirdType',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '库存',
                    key: 'Stock', //UnitSales
                    width: 120,
                    align: 'center',
                    render: (h, params) => {
                        const { Stock, UnitSales } = params.row
                        return h('div', [h('p', {}), `${Stock} ${UnitSales} `])
                    }
                },
                {
                    title: '价格',
                    key: 'Price', //UnitSales
                    width: 120,
                    align: 'center',
                    render: (h, params) => {
                        const { Price, UnitSales } = params.row
                        return h('div', [
                            h('p', {}),
                            `${Price} / ${UnitSales} `
                        ])
                    }
                },
                {
                    title: '总成本',
                    key: 'allcost',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '货位',
                    key: 'Location',
                    width: 120,
                    align: 'center'
                }
                // {
                //     title: '日期',
                //     width: 120,
                //     align: 'center',
                //     render: (h, params) => {
                //         const { PayTime } = params.row
                //         return h('div', [h('p', {}), PayTime.substring(0, 10)])
                //     }
                // },
            ]
        }
    },
    methods: {
        //打印
        handlePrint() {
            ExeclData({
                Type: this.search.Type,
                start: this.search.start,
                end: this.search.end,
                ShopID: this.search.ShopID,
                keyword: this.search.keyword
            }).then(res => {
                this.dataArr = res.data
                this.isPrint = true
                setTimeout(() => {
                    this.$print(this.$refs.Drugs) // 使用
                    this.isPrint = false
                }, 1000)
            })
        },
        //点击获取门店名称
        handleshopList(item) {
            this.Name = item.ShopName
        },
        //表格导出
        exportExcel() {
            ExeclData({
                type: this.search.type,
                shopid: this.search.shopid,
                keyword: this.search.keyword,
                pageindex: 1,
                pagesize: 10000
            }).then(res => {
                this.tableData = res.data.rows
                if (this.tableData.length) {
                    // for (let i = 0; i < this.tableData.length; i++) {
                    //     this.tableData[i].ss = (
                    //         this.tableData[i].PCost * this.tableData[i].PCount
                    //     ).toFixed(2)
                    //     this.tableData[i].sss = (
                    //         this.tableData[i].PriceNew *
                    //         this.tableData[i].PCount
                    //     ).toFixed(2)
                    //     this.tableData[i].ssss = (
                    //         this.tableData[i].PriceNew *
                    //             this.tableData[i].PCount -
                    //         this.tableData[i].PCost * this.tableData[i].PCount
                    //     ).toFixed(2)
                    // }
                    this.exportLoading = true
                    const params = {
                        title: [
                            // '药品ID',
                            '商品名称',
                            '通用名',
                            '生产厂家',
                            '药品分类',
                            '库存',
                            '规格',
                            '进货单位',
                            '销售单位',
                            '换算系数',
                            '价格',
                            '总成本',
                            '货位'
                        ],
                        key: [
                            // 'PID',
                            'ProName',
                            'ShortName',
                            'FactoryShortName',
                            'ThirdType',
                            'Stock',
                            'Spec',
                            'UnitBuy',
                            'UnitSales',
                            'UnitCount',
                            'Price',
                            'allcost',
                            'Location'
                        ],
                        data: this.tableData,
                        autoWidth: true,
                        filename: this.Name
                    }
                    excel.export_array_to_excel(params)
                    this.exportLoading = false
                } else {
                    this.$message.error('表格数据不能为空！')
                }
            })
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            getTablesList(data).then(res => {
                this.list = res.data.rows
                this.loading = false
                this.total = res.data.records
            })
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true
            this.search.pageindex = 1
            this.search.pagesize = 10
            this.getTablesListData()
        },
        /* 对话框 */
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true
            if (type == 'page') {
                this.search.pageindex = page
                this.getTablesListData()
            } else {
                this.search.pagesize = page
                this.getTablesListData()
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = []
            for (let item in list) {
                arr.push(list[item].ID)
                arr.join(',')
            }
            arr = arr.join(',')
            this.allSelectArr = arr
        }
    },
    mounted() {
        shopData({
            pageindex: '',
            pagesize: ''
        }).then(res => {
            this.shopList = res.data.rows
            // this.shopList.unshift({
            //     ID: 0,
            //     ShopName: '全部'
            // })
        })
        /* 列表请求 */
        // const { id, type } = this.$route.params;
        // this.type = type;
        // if (this.type != 1) {
        //     this.columns.pop();
        // }
        // this.search.keyword = id;
        this.getTablesListData()
    }
}
</script>

<style lang="less" scoped>
.demo-auto-complete-wrap {
    top: 100px;
    height: 300px;
    overflow-y: scroll;
}
.demo-auto-complete-item {
    padding: 4px 0;
}
.demo-auto-complete-group {
    font-size: 12px;
    padding: 4px 6px;
}
.demo-auto-complete-group span {
    color: #666;
    font-weight: bold;
}
.demo-auto-complete-group a {
    float: right;
}
.demo-auto-complete-count {
    float: right;
    color: #999;
}
.demo-auto-complete-more {
    display: block;
    margin: 0 auto;
    padding: 4px;
    text-align: center;
    font-size: 12px;
}
</style>

